<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>游戏小秘书聊天测试</title>
    <style>
        .btn-group{
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="row">
        <h2>西游游戏内私聊测试(1643093398001)</h2>
    </div>
    <div class="row">
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务器ID:&nbsp;&nbsp;
            <input type='text' id='server_id' value='1' class="form-control" style='width:150px;height:20px' />
        </h3>
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;玩家角色ID:&nbsp;&nbsp;
            <input type='text' id='role_id' value='10000127' class="form-control" style='width:150px;height:20px' />
        </h3>
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;玩家角色名:&nbsp;&nbsp;
            <input type='text' id='role_name' value='玉面狐狸' class="form-control" style='width:150px;height:20px' />
        </h3>
        <h3>私聊目标角色ID:
            <input type='text' id='target_role_id' value='1' class="form-control" style='width:150px;height:20px' />
        </h3>
    </div>
    <div class="btn-group">
        &nbsp;&nbsp;
        <button type="button" class="btn btn-default" onclick='addsocket();'>连接</button>
        <button type="button" class="btn btn-default" onclick='closesocket();'>断开</button>
        <button type="button" class="btn btn-default" onclick='$("#wsaddr").val("")'>清空</button>
    </div>
    <div class="row">
        <div id="output" style="border:1px solid #ccc;height:365px;overflow: auto;margin: 20px 0;"></div>
        <input type="text" id='message' class="form-control" style='width:500px;height:30px' placeholder="请输入私聊消息" onkeydown="en(event);" />
        <span class="input-group-btn">
            <button class="btn btn-default" type="button" onclick="doSend();">发送</button>
        </span>
    </div>
</body>

<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    function formatDate(now) {
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return year + "-" + (month = month < 10 ? ("0" + month) : month) + "-" + (date = date < 10 ? ("0" + date) : date) +
            " " + (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                second = second < 10 ? ("0" + second) : second);
    }

    function formatTime(now) {
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        return (hour = hour < 10 ? ("0" + hour) : hour) + ":" + (minute = minute < 10 ? ("0" + minute) : minute) + ":" + (
                second = second < 10 ? ("0" + second) : second);
    }
    var output;
    var websocket;

    var appkey='1643093398001';
    var serverId='';
    var roleId='';
    var roleName='角色名';
    var targetRoleId='';

    function init() {
        output = document.getElementById("output");
        testWebSocket();
    }

    function addsocket() {
        /*var wsaddr = $("#wsaddr").val();
        if (wsaddr == '') {
            alert("请填写websocket的地址");
            return false;
        }*/
        console.log(window.location.host);
        let _serverId = $("#server_id").val();
        let _roleId = $("#role_id").val();
        let _roleName = $("#role_name").val();
        let _targetRoleId = $("#target_role_id").val();

        if (_serverId == '') {
            alert("请填写服务ID");
            return false;
        }
        if (_roleId == '') {
            alert("请填写玩家角色ID");
            return false;
        }
        if (_roleName == '') {
            alert("请填写玩家角色名");
            return false;
        }
        if (_targetRoleId == '') {
            alert("请填写私聊目标角色ID");
            return false;
        }
        serverId = _serverId;
        roleId = _roleId;
        roleName = encodeURIComponent(_roleName);
        targetRoleId = _targetRoleId;
        var host = window.location.host;
        var wsaddr = "ws://" + host + "/websocket?appkey=" + appkey + "&serverId=" + serverId
            + "&roleId=" + roleId + "&roleName=" + roleName
            + "&targetRoleId=" + targetRoleId;
        StartWebSocket(wsaddr);
    }

    function closesocket() {
        websocket.close();
    }

    function StartWebSocket(wsUri) {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    }

    function onOpen(evt) {
        writeToScreen("<span style='color:red'>角色Id:" + roleId + " 连接成功，现在你可以向角色Id:" + targetRoleId + " 发送消息啦~</span>");
    }

    function onClose(evt) {
        websocket.close();
        writeToScreen("<span style='color:red'>角色Id:" + roleId + " 连接已断开!!!</span>");
    }

    function onMessage(evt) {
        let msg = evt.data;
        if ("succ" === msg) {
            console.log("服务端响应消息发送成功")
            return;
        }
        writeToScreen('<span style="color:blue">' + formatDate(new Date()) + '&nbsp;' + evt.data + '</span>');
    }

    function onError(evt) {
        writeToScreen('<span style="color: red;">发生错误:</span> ' + evt.data);
    }

    function doSend() {
        var message = $("#message").val();
        if (message == '') {
            alert("请先填写发送信息");
            $("#message").focus();
            return false;
        }
        if (typeof websocket === "undefined") {
            alert("websocket还没有连接，或者连接失败，请检测");
            return false;
        }
        if (websocket.readyState == 3) {
            alert("websocket已经关闭，请重新连接");
            return false;
        }

        console.log(websocket);
        websocket.send(message);
        $("#message").val('');
        writeToScreen('<span style="color:green">' + formatDate(new Date()) + '&nbsp;角色Id:' + roleId + '&nbsp;发送消息:&nbsp;' + message + '</span>');
    }

    function writeToScreen(message) {
        var div = "<div class='newmessage'>" + message + "</div>";
        var d = $("#output");
        var d = d[0];
        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
        $("#output").append(div);
        if (doScroll) {
            d.scrollTop = d.scrollHeight - d.clientHeight;
        }
    }

    function en(event) {
        var evt = evt ? evt : (window.event ? window.event : null);
        if (evt.keyCode == 13) {
            doSend()
        }
    }
</script>
</html>